<template>
    <div class='main'>
		<transition 
		@before-enter='beforeenter'
		@enter="enter"
		@after-enter=afterenter
		>
		<div v-show="ballflag"  ref='balllist' class="ball"></div>
		</transition>
		
       	<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<lunboto-lab :oklunbotu='mes' :widthfull="isfull"></lunboto-lab>
					</div>
				</div>
                </div>

                <div class="mui-card">
				<div class="mui-card-header">{{ good.title }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner left">
						<p>
							市场价:<del>￥{{ good.sell_price }}</del>&nbsp;&nbsp;
							销售价:<span>￥{{ good.market_price }}</span>						
						</p>
						<p>购买数量:<numbox @select="getnumber" :max='good.stock_quantity'></numbox>
						</p>
						<mt-button  size="small" type='primary'>立即购买</mt-button>
						<mt-button @click='showball' size="small" type='danger'>加入购物车</mt-button>
					</div>
				</div>
			
			</div>

        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner left">
						<p>商品编号:{{ good.goods_no }}</p>
						<p>商品库存:{{ good.stock_quantity }}</p>
						<p>上架时间:{{ good.add_time| solveTime }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
				<mt-button @click="showinfo(good.id)" type='primary' plain size='large'>图文介绍</mt-button>
				<mt-button @click='showcomment(good.id)' type='danger' plain size='large'>商品评论</mt-button>
				</div>
			
			</div>

           
			

    </div>
</template>

<script>
import lunbotu from '../../components/lunbotu/lunbotu.vue'
import numbox from '../../components/button/shopbutton.vue'
export default{
    data () {
		return {
			id:this.$route.params.id,
			mes:[],
			isfull:false,
			errorgood:[],
			good:[],
			ballflag:false,
			selectednum:1
		}
	},
	created() {
		this.showimg()
		this.showdata()
	},
	methods: {
		showimg(){
			this.$http.get('api/getthumimages/'+this.id).then(data=>{
				if(data.body.status===0){
					data.body.message.forEach(item => {
						item.img='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2136520757,2828776706&fm=15&gp=0.jpg'
					});
					this.mes=data.body.message
				}
			})
		},
		showdata(){
            this.$http.get('api/goods/getinfo/'+this.id).then(data=>{
                if(data.body.status===0){
					 this.errorgood=data.body.message
					 this.good=this.errorgood[0]
                    }
                })
		},
		showinfo(id){
			this.$router.push( {name:'shopinfo',params:{id:this.id}} )
		},
		showcomment(id){
			this.$router.push( {name:'shopcomment',params:{id:this.id}} )
		},
		showball(){
			this.ballflag=!this.ballflag
		},
		beforeenter(el){
			el.style.transform='translate(0,0)'
		},
		
		enter(el,done){
			const firstball =this.$refs.balllist.getBoundingClientRect()
			const secondball = 
			 document.getElementById('second')
			.getBoundingClientRect()
			const oktop=secondball.top-firstball.top
			const okleft=secondball.left-firstball.left
			console.log(firstball)
			console.log(secondball);
			
			el.offsetWidth
			el.style.transform=`translate(${okleft}px,${oktop}px)`
			el.style.transition='all 2s ease'
			done()
		},
		afterenter(el){
			this.ballflag=!this.ballflag
            var shopobj={
				id:parseInt(this.id),
				price:this.good.sell_price,
				count:this.selectednum,
				maxcount:this.good.stock_quantity,
				selected:true
			}
			this.$store.commit("addshop",shopobj)
			// this.$store.commit('test')
			
		},
		getnumber(num){
		   this.selectednum=num
		}
		 
	},
	components:{
		'lunboto-lab':lunbotu,
		numbox
	}
	
}
    
</script>
<style lang="less" scoped>
.ball{
	background-color: red;
	position: absolute;
	top:386px;
	left: 136px;
	height: 20px;
	width: 20px;
	border-radius:50%;
	z-index: 99; 
}
.main{
    background-color:#eee;
    overflow: hidden;
}
.mui-card-content-inner{
	text-align: center;
}
.mui-card-content-inner.left{
	text-align: left;
	del{
          font-size: 13px;
	}
	span{
			 font-size: 15px;
			 color: red;
			 
	}
}
.mui-card-footer{
	display: block;
	.mint-button--large {
    display: block;
	width: 100%;
	margin: 15px 0;
}
}
</style>
